<template>
  <view class="detail-container">
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view>
        <ve-card
          v-for="record in dataSource"
          :record="record"
          :key="record.id"
          :title="'车牌号：' + record.licenseNo"
          :sub-title="record.statusStr"
          :type="record.status == 0 ? 'yellow' : record.status == 1 ? 'blue' : 'gray'"
          fold
        >
          <ve-cell-val label="入厂时间" :value="record.entranceDate" />
          <ve-cell-val label="出厂时间" :value="record.exportDate" />
          <ve-cell label="关联订单号">
            <view
              >{{ record.orderNo || '-'
              }}<view class="line-ellipsis" v-if="record.giveStaffName" style="width: 400rpx">交车人：{{ record.giveStaffName }}</view>
            </view>
          </ve-cell>
          <ve-cell-val label="修理厂" :value="record.maintenanceShop" />
          <ve-cell-price label="费用合计" :value="record.totalAmount" />
          <ve-cell-val label="负责人" :value="record.undertaker" />
        </ve-card>
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import useList from '@/hooks/useList'
  const props = defineProps({
    orderId: [String, Number],
  })

  // 查询参数
  const queryParam = ref({
    pageSize: 10,
    violationTimeType: 1,
    orderId: '',
  })
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/carMaintenance/getList',
    queryParam,
  )

  onMounted(() => {
    if (props.orderId) {
      queryParam.value.orderId = props.orderId
      loadData()
    }
  })
</script>

<style lang="scss" scoped>
  .detail-container {
    padding: 24rpx;
  }
</style>
